<template>
	<view class="content">
		<view class="luckyGrid-box" :class="bdStyle">
			<view v-for="(item, index) in prizes" :key="index" class="item" :class="{ 'item-active': item.active }">
				<image class="item-img" :src="item.img" mode="widthFix" @tap="start(index)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';

	export default {
		setup() {
			const innerAudioContext = ref(null);
			const startStatus = ref(false);
			const endNumber = ref('');
			const endStatus = ref(false);
			const bdStyle = ref('');
			const activeIndex = ref(0);
			const prizes = reactive([{
					name: '基础足浴',
					active: false,
					img: 'https://www.xiaomicang.com/static/luckyGrid/prize.png'
				},
				{
					name: '肝肾保健',
					active: false,
					img: 'https://www.xiaomicang.com/static/luckyGrid/prize.png'
				},
				{
					name: '养生帝王套',
					active: false,
					img: 'https://www.xiaomicang.com/static/luckyGrid/prize.png'
				},
				{
					name: '桑拿一条龙',
					active: false,
					img: 'https://www.xiaomicang.com/static/luckyGrid/prize.png'
				},
				{
					name: '立即抽奖',
					active: false,
					img: '../../../static/luckyGrid/btn.png'
				},
				{
					name: 'Ktv总统套',
					active: false,
					img: 'https://www.xiaomicang.com/static/luckyGrid/prize.png'
				},
				{
					name: '夜总会至尊卡',
					active: false,
					img: 'https://www.xiaomicang.com/static/luckyGrid/prize.png'
				},
				{
					name: '法拉利458',
					active: false,
					img: 'https://www.xiaomicang.com/static/luckyGrid/prize.png'
				},
				{
					name: '布加迪威龙',
					active: false,
					img: 'https://www.xiaomicang.com/static/luckyGrid/prize.png'
				},
			]);
			const order = [0, 1, 2, 5, 8, 7, 6, 3];

			const start = (index) => {
				if (index === 4 && !startStatus.value) {
					music();
					prizes[order[activeIndex.value]].active = false;
					endStatus.value = false;
					startStatus.value = true;
					bdStyle.value = 'bdStyle';

					const timer = setInterval(() => {
						prizes[order[activeIndex.value]].active = true;

						setTimeout(() => {
							if (endStatus.value && endNumber.value === activeIndex.value) {
								innerAudioContext.value.pause();
								bdStyle.value = '';
								startStatus.value = false;
								clearInterval(timer);
								uni.showToast({
									icon: 'none',
									duration: 2500,
									title: `恭喜您获得 ${prizes[order[activeIndex.value]].name}`,
								});
							} else {
								prizes[order[activeIndex.value]].active = false;
								activeIndex.value++;
								if (activeIndex.value >= order.length) activeIndex.value = 0;
							}
						}, 250);
					}, 150);

					setTimeout(() => {
						end(Math.ceil(Math.random() * (prizes.length - 2)));
					}, 5000);
				}
			};

			const end = (prizeId) => {
				endNumber.value = prizeId;
				endStatus.value = true;
			};

			const music = () => {
				innerAudioContext.value = uni.createInnerAudioContext();
				innerAudioContext.value.autoplay = true;
				innerAudioContext.value.loop = true;
				innerAudioContext.value.src = 'https://www.xiaomicang.com/static/luckyGrid/bgm.mp3';
				innerAudioContext.value.onPlay(() => {
					console.log('开始播放');
				});
				innerAudioContext.value.onError((res) => {
					console.error(res.errMsg, res.errCode);
				});
			};

			return {
				prizes,
				bdStyle,
				start,
			};
		},
	};
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-image: url(https://www.xiaomicang.com/static/luckyGrid/bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		text-align: center;

		.luckyGrid-box {
			width: 500rpx;
			height: 500rpx;
			padding: 20rpx;
			border: 10px solid #55007f;
			background-color: #ddd6f3;
			border-radius: 50rpx;
			margin: 40vh auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;

			.item {
				width: 30%;
				height: 150rpx;
				background-color: #f1f1f1;
				border-radius: 20rpx;

				.item-img {
					width: 80%;
					margin: 10% auto;
				}
			}

			.item-active {
				background-color: #faaca8;
			}
		}

		.bdStyle {
			animation: bd 0.6s infinite;
		}

		@keyframes bd {
			0% {
				border: 10px solid #ff3cac;
			}

			50% {
				border: 10px solid #784ba0;
			}

			100% {
				border: 10px solid #2b86c5;
			}
		}
	}
</style>